<script lang="ts" setup>
  import Header from '@/components/layout/Header.vue'
  import FloatButton from './FloatButton.vue'
  import { onMounted, ref } from 'vue'
  import { findUserCategoryReq } from '@/api'

  const categoryLevel1 = ref<any[]>([])
  const categoryLevel2 = ref<any[]>([])

  const getTableData = async (level: string) => {
    const res = await findUserCategoryReq({ level })
    if (res?.data) {
      if (level === '0') {
        categoryLevel1.value = res.data
      } else {
        categoryLevel2.value = res.data
      }
    }
  }

  const refreshCategoryData = () => {
    getTableData('0')
    getTableData('1')
  }

  onMounted(() => {
    refreshCategoryData()
  })
</script>

<template>
  <a-space
    direction="vertical"
    :style="{ width: '100%' }"
    :size="[0, 48]"
  >
    <a-layout>
      <a-layout-header class="header">
        <Header />
      </a-layout-header>
      <a-layout-content class="content">
        <!-- 根据当前路由动态传递参数 -->
        <router-view v-slot="{ Component, route }">
          <component
            :is="Component"
            v-bind="
              route.name !== 'UserManage'
                ? {
                    categoryLevel1,
                    categoryLevel2,
                    refreshCategoryData,
                  }
                : {}
            "
          />
        </router-view>
      </a-layout-content>
      <FloatButton />
    </a-layout>
  </a-space>
</template>

<style lang="less" scoped>
  .header {
    background: var(--color-primary);
    padding: 0 20px;
    line-height: 64px;
    color: white;
    font-size: 18px;
  }

  .content {
    background: rgb(255, 255, 255);
    padding: 0 20px;
    min-height: calc(100vh - 64px);
    font-size: 16px;
  }
</style>
